<template>
  <div :class="rootClass">
    <div class="apply-status-box-left">
      <div class="activity-price-row">
        <div class="activity-price">
          <text class="activity-price-unit">¥</text>
          <text class="activity-price-value">{{ price }}</text>
          <text class="activity-price-text">起</text>
        </div>
        <div class="activity-apply-number">已报名 {{ applyNum }}/{{ totalNum }}</div>
      </div>
      <div class="activity-apply-processbar">
        <div class="activity-apply-processbar-value" :style="processStyle"></div>
      </div>
    </div>
    <div v-if="showButton" class="apply-status-box-right">
      <u-button type="primary">立即报名</u-button>
    </div>
  </div>
</template>

<script lang="ts" setup name="acitivtyApplyStatus">
import { computed } from 'vue'

const props = defineProps(['price', 'applyNum', 'totalNum', 'showButton', 'size']);

const rootClass = computed(() => {
  return `apply-status-box ${props.size}`;
});

const processStyle = computed(() => {
  if (props.totalNum === props.applyNum) {
    return { width: '100%' };
  }

  return { width: (props.applyNum / props.totalNum) * 100 + '%' };
});
</script>

<style lang="scss" scoped>
.apply-status-box {
  display: flex;
  height: 40px;
  border-radius: 8px;
  background: rgba(#f36d3c, 0.1);

  .activity-apply-processbar {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: rgba(#f36d3c, 0.2);
  }

  .activity-apply-processbar-value {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #f75d24;
    z-index: 1;
    border-radius: 8px;
  }

  .activity-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .activity-price {
    color: #f75d24;
  }

  .activity-price-unit {
    font-size: 14px;
  }

  .activity-price-value {
    font-size: 20px;
  }

  .activity-price-text {
    font-size: 12px;
  }

  .activity-apply-number {
    font-size: 12px;
    color: rgba(#f75d24, 0.8);
  }

  &.is-over {
    filter: grayscale(1);
  }

  &.large {
    height: 48px;

    .activity-price-value {
      font-size: 24px;
    }
  }
}

.apply-status-box-left {
  flex: 1;
  padding: 2px 12px;
}

.apply-status-box-right {
  width: 88px;
}
</style>
